//api按钮列表数据
// JSON数据
let apiTypeData = [{
        name: "全部",
        keyword: "身份证实名",
        isnew: false
    },
    {
        name: "生活服务",
        keyword: "银行卡",
        isnew: false
    },
    {
        name: "金融科技",
        keyword: "短信",
        isnew: false
    },
    {
        name: "交通地理",
        keyword: "天气",
        isnew: false
    },
    {
        name: "充值缴费",
        keyword: "短信",
        isnew: false
    },
    {
        name: "数据智能",
        keyword: "手机归属地",
        isnew: false
    },
    {
        name: "企业工商",
        keyword: "IP",
        isnew: false
    },
    {
        name: "应用开发",
        keyword: "手机归属地",
        isnew: false
    },
    {
        name: "电子商务",
        keyword: "IP",
        isnew: false
    },
    {
        name: "吃喝玩乐",
        keyword: "视频",
        isnew: false
    },
    {
        name: "文娱视频",
        keyword: "视频",
        isnew: false
    },
    {
        name: "免费接口大全",
        keyword: "短信",
        isnew: true
    },
    {
        name: "短信",
        keyword: "身份证实名",
        isnew: false
    },
    {
        name: "汽车",
        keyword: "银行卡",
        isnew: false
    },
    {
        name: "核验",
        keyword: "银行卡",
        isnew: false
    },
    {
        name: "最新发布",
        keyword: "银行卡",
        isnew: true
    },
    {
        name: "API私有化部署",
        keyword: "身份证实名",
        isnew: true
    },
]
// 先获取 btn-list容器
let apiBtnList = document.querySelector(".btn-list")
// v是数组里面的每一项
apiTypeData.forEach(function (v, i) {
    // 三目运算符：条件？条件为真：条件为假
    apiBtnList.innerHTML += `<a href="" class="${v.isnew?"bold":""}">${v.name}</a>`;
    //  获取所有的a标签
    let btnList = document.querySelectorAll(".btn-list a");
    let label = document.querySelector("label");
    btnList.forEach(function (v, i) {
        //  v是a标签
        v.onclick = function () {
            btnList.forEach(function (v2, i2) {
                console.log("Liella");
                //  先清除所有标签的active类名
                v2.classList.remove("active");
            });
            //  给当前a添加类名
            v.classList.add("active");
            label.innerHTML = `<span>${apiTypeData[i].name}</span>
         <input type="text" placeholder="${apiTypeData[i].keyword}">`;
            //  阻止a标签的默认行为
            return false;
        }
    });
});
//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    {
        img: "API_01.jpg",
        name: "2021出行防疫政策指南",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_02.jpg",
        name: "身份证实名认证",
        price: "￥0.2000/次",
        isSpecial: true
    },
    {
        img: "API_03.jpg",
        name: "天气预报",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_04.jpg",
        name: "银行卡四元素校验",
        price: "￥0.3360/次",
        isSpecial: true
    },
    {
        img: "API_05.jpg",
        name: "短信API服务",
        price: "￥0.0400/次",
        isSpecial: true
    },

    //第二行
    {
        img: "API_01.jpg",
        name: "2021出行防疫政策指南",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_02.jpg",
        name: "身份证实名认证",
        price: "￥0.2000/次",
        isSpecial: true
    },
    {
        img: "API_03.jpg",
        name: "天气预报",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_04.jpg",
        name: "银行卡四元素校验",
        price: "￥0.3360/次",
        isSpecial: true
    },
    {
        img: "API_05.jpg",
        name: "短信API服务",
        price: "￥0.0400/次",
        isSpecial: true
    },
    //第三行
    {
        img: "API_01.jpg",
        name: "2021出行防疫政策指南",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_02.jpg",
        name: "身份证实名认证",
        price: "￥0.2000/次",
        isSpecial: true
    },
    {
        img: "API_03.jpg",
        name: "天气预报",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_04.jpg",
        name: "银行卡四元素校验",
        price: "￥0.3360/次",
        isSpecial: true
    },
    {
        img: "API_05.jpg",
        name: "短信API服务",
        price: "￥0.0400/次",
        isSpecial: true
    },
    //第四行
    {
        img: "API_01.jpg",
        name: "2021出行防疫政策指南",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_02.jpg",
        name: "身份证实名认证",
        price: "￥0.2000/次",
        isSpecial: true
    },
    {
        img: "API_03.jpg",
        name: "天气预报",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_04.jpg",
        name: "银行卡四元素校验",
        price: "￥0.3360/次",
        isSpecial: true
    },
    {
        img: "API_05.jpg",
        name: "短信API服务",
        price: "￥0.0400/次",
        isSpecial: true
    },

]
//   获取父容器
let apiList = document.querySelector(".api-list");
//   遍历对象 拿到每一项
listDataArr.forEach(function (v, i) {
    apiList.innerHTML += `
      <li>
      ${v.isSpecial ? "<span>企业专用</span>" : ""}
      <a href="../pages/APIdetails.html">
      <img src="../images/${v.img}"alt="">
      <p class="title">${v.name}</p>
      <p class="price ${v.price == "免费" ? "green" : "red"}">
      ${v.price}
      </p>
      </a>
      <button>申请数据</button>
      </li>
      `
});
let btn = document.querySelector(".active-left");
// console.log(btn);

let btn1 = document.querySelector(".active-right");
let main = document.querySelector(".right-main");
let main1 = document.querySelector(".content-dark");
btn.onclick = function () {
    main.style.display = "block";
    main1.style.display = "none";
    btn.classList.add("on");
    btn1.classList.remove("on");
}
btn1.onclick = function () {
    main1.style.display = "block";
    main.style.display = "none";
    btn1.classList.add("on");
    btn.classList.remove("on");
};
let Allbtn = document.querySelectorAll(".api-list button");
let mask = document.querySelector(".mask");
let bigbox = document.querySelector(".bigbox");
Allbtn.forEach(function (v, i) {
    v.onclick = function () {
        mask.style.display = "block"
        bigbox.style.display = "block"
    }
});
mask.onclick = function (e) {
    if (e.target.classList.contains("mask")) {
        mask.style.display = "none";
        bigbox.style.display = "none";
    } else {
        console.log("不是mask")
    }
};
let img = document.querySelectorAll("form img");
console.log(img);
let input = document.querySelectorAll("form input");
console.log(input);
img.forEach(function (v, i) {
    v.onclick = function () {
        input[i].value = "";
        v.style.display = "none";
    }
});
input.forEach(function (v, i) {
    v.oninput = function () {
        if (v.value.length >= 1) {
            img[i].style.display = "block";
        } else {
            img[i].style.display = "none";
        }
    }
});
let btns = document.querySelector(".btn");
let input1 = document.querySelector(".main-username input");
let input2 = document.querySelector(".main-pwd input");
let box = document.querySelector(".form-box");

let isNameAllow = false;
btns.onclick = function () {
    if (input1.value.length >= 6) {
        isNameAllow = true;
    } else {
        box.style.display = "block"
        box.innerText = "用户名格式不正确"
        isNameAllow = false;
        setTimeout(function () {
            box.style.display = "none";
        }, 3000)
    }
    if (isNameAllow) {
        if (input2.value.length >= 6) {
            box.style.display = "block"
            box.innerText = "登录成功"
            setTimeout(function () {
                location.href = "../pages/index.html"
            }, 3000)
        } else {
            box.style.display = "block"
            box.innerText = "密码格式不正确"
            setTimeout(function () {
                box.style.display = "none";
            }, 3000)
        }
    }
}